<template>
    <div class="special">

        <div class="specials" v-for="item of special" :key="item.id">
            <img :src="item.scene_pic_url" alt="">
            <div class="title">
                <p>{{item.title}}</p>
                <p>{{item.subtitle}}</p>
                <div class="prize">￥ {{item.price_info}}.00 元 起</div>
            </div>
        </div>
        <van-pagination v-model="currentPage" :show-page-size="0" @change="next" :page-count="count" />
        <van-loading v-show="isShow" size="50px" vertical></van-loading>
    </div>
</template>

<script>
    import { getPage } from "../api/api"
    export default {
        name: 'YxSpecial',

        data() {
            return {
                currentPage: 1,
                count: 0,
                isShow:false,
                special: []
            };
        },

        created() {

            this.pagination()
        },

        methods: {
            pagination() {
                getPage({ page: this.currentPage.toString(), size: '10' }).then(res => {
                    this.special = res.data.data
                    this.count = res.data.totalPages
                    this.currentPage = res.data.currentPage
                    console.log(res)
                })
            },
            next() {
                console.log(this.currentPage)
                this.isShow = true;
                setTimeout(()=>{
                    this.isShow = false;
                    window.scrollTo(0, 0)
                },1500)
                this.pagination();
             
            }
        },
    };
</script>

<style lang="scss" scoped>
    .specials {
        background-color: #fff;
     
        margin-bottom: .4rem;

        img {
            width: 100%;

        }

        .title {
            text-align: center;
            line-height: .6rem;
        }
    }

    .special {
        background-color: #EFEFEF;
        position: relative;
    }

    /deep/.van-pagination__page {
        display: none;
    }

    .van-pagination {
        margin-bottom: 1rem;

    }

    .van-loading {
        position: absolute;
        bottom: 8%;
        left: 45%;
        color: rebeccapurple;
        z-index: 999;
    }

</style>
